<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-item" v-for="(item, index) in navItems" :key="index">
        {{ item }}
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-bar">
      <input type="text" placeholder="请输入内容" v-model="searchQuery"/>
      <button @click="search">搜索</button>
    </view>
	
	<view class="" style="font-size: 50px; color: blue; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);">
	  历史课程
	</view>

    <!-- 课程列表 -->
    <view class="course-list">
      <view class="course-item" v-for="(item, index) in courses" :key="index">
        <view class="course-image" :style="{ backgroundColor: item.color }"></view>
        <view class="course-info">
          <text>{{ item.title }}</text>
          <text>{{ item.description }}</text>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
<!--    <view class="footer-nav">
      <view class="footer-item" v-for="(item, index) in footerItems" :key="index">
        {{ item }}
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
		searchQuery: '',
      navItems: ['语文', '数学', '英语', 'java'],
      courses: [
        { title: '课程1', description: '这是课程1的描述', color: '#FFD700' },
        { title: '课程2', description: '这是课程2的描述', color: '#FFFF00' },
        { title: '课程3', description: '这是课程3的描述', color: '#FFFFFF' }
      ],
      footerItems: ['首页', '发现', '消息', '我的']
    };
  },
  methods:{
	  search() {
	      const url = '你的后端接口地址'; // 替换为你的后端接口地址
	      uni.request({
	        url: url,
	        method: 'GET', // 或者 'POST'，根据你的后端接口要求
	        data: {
	          query: this.searchQuery // 发送搜索框的值
	        },
	        success: (res) => {
	          // 请求成功后的处理
	          console.log(res.data);
	        },
	        fail: (err) => {
	          // 请求失败后的处理
	          console.error(err);
	        }
	      });
	    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #e0e0e0;
  padding: 10px;
}

.nav-item {
  flex: 1;
  text-align: center;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
}

.search-bar input {
  flex: 1;
  margin-right: 10px;
}

.course-list {
  flex: 1;
  padding: 10px;
}

.course-item {
  display: flex;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px;
}

.course-image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.course-info {
  flex: 1;
}

.footer-nav {
  display: flex;
  justify-content: space-around;
  background-color: #e0e0e0;
  padding: 10px;
}
</style>